<template>
    <div class="order">
        <hb-title-levels :list="titleList"
            pathType=“a” />
        <div class="pos-re">
            <hb-select-title0 :list="list1"
                @select="e_sel" />
            <ul class="ul-right">
                <li>
                    <select v-model="symbol" class="selece_1" @click="select_">
                        <option v-for='(item,index) in coinlist'
                            :key="index"
                            v-bind:value="item.value"
                            v-text="item.text" />
                    </select>
                </li>
                <span class="slash">/</span>
                <li>
                    <select v-model="traType" class="selece_2" @click="select_">
                        <option v-for='(item,index) in items'
                            :key="index"
                            v-bind:value="item.value"
                            v-text="item.text" />
                    </select>
                </li>
                <!-- <li>
                    <button class="btn" @click="btn_">搜索</button>
                </li> -->
            </ul>

        </div>
        <table class="q-table">
            <thead>
                <tr>
                    <td v-for="(item,index) in message"
                        :key="index"
                        v-text="item.name">

                    </td>
                </tr>
            </thead>

            <tbody >
                <tr v-if="hasDate" v-for="(v,y) in listdata" :key="y">
                    <td v-text="v.fcreateTime"/>
					<td v-text="v.mapping"/>
					<!-- 0买入 1 卖出 -->
                    <td v-text="Lang.tartype[lang][v.fentrustType]"/>
                    <td v-text="v.fprize"/>
                    <td v-text="v.fcount"/>
					<td v-text="v.fleftCount"/>
					<td v-text="v.ffees"/>
                    <td>
                        <hb-button2 :txt="Lang.tableHade[lang][8]"
                            @clk="e_back(v.fid)" />
                    </td>
                </tr>
                <tr v-if="!hasDate">
                    <td colspan="6"
                        class="t-c" v-text="Lang.marked[lang]">
                        
                    </td>
                </tr>
            </tbody>
        </table>
		<hb-dialog v-if="msg !== ''"
            @clk="e_en()">
            <span v-text="msg"/>
        </hb-dialog>
    </div>
</template>

<script>
import {vpost, vlink} from '@api'
import Lang from './lang.js'
export default {
	name: 'order',
	data() {
		return {
			Lang,
			hiddTr: false, // hack 隐藏表格
			traType: 2,
			symbol: 0,
			coinlist: [],
			tradeType: 1,
			listdata: [],
			hasDate: false,
			msg: '',
		}
	},
	computed: {
		lang() {
			return this.$store.state.setting.lang
		},
		message() {
			return [
				{name: Lang.tableHade[this.lang][0]},
				{name: Lang.tableHade[this.lang][1]},
				{name: Lang.tableHade[this.lang][2]},
				{name: Lang.tableHade[this.lang][3]},
				{name: Lang.tableHade[this.lang][4]},
				{name: Lang.tableHade[this.lang][5]},
				{name: Lang.tableHade[this.lang][6]},
				{name: Lang.tableHade[this.lang][7]},
			]
		},
		items(){
			return [{text: Lang.tartype[this.$store.state.setting.lang][4], value: 2}, 
			{text: Lang.tartype[this.$store.state.setting.lang][2], value: 0}, 
			{text: Lang.tartype[this.$store.state.setting.lang][3], value: 1}]
		},
		titleList(){
			return [{path: 'kline', txt: Lang.list[this.$store.state.setting.lang][0]},
			 {path: 'order', txt: Lang.list[this.$store.state.setting.lang][1]}]
		},
		list1(){
			return [{txt: Lang.title[this.$store.state.setting.lang][0],value: 1,},
			{txt: Lang.title[this.$store.state.setting.lang][1],value: 0,},]
		}
	},
	created() {
		//初始化获取所有的币种
		vpost(vlink.bbTrade.getTransactionPairAll).then(re => {
			this.coinlist = re.data.FBList
			this.symbol = re.data.FBList[0].value
			this.init()
		})
	},
	methods: {
		//是否成交?
		e_sel(i, v) {
			this.tradeType = v
			this.init()
		},
		//撤销
		e_back(id) {
			vpost(vlink.bbTrade.cancelUserEntrust, {id: id}).then(re => {
				if (re != null) {
					this.msg = re.msg
					this.init()
					setTimeout(() => {
						this.msg = ''
					}, 1300)
				}
			})
		},
		e_en() {
			this.msg = ''
		},
		select_() {
			this.init()
		},
		init() {
			let dataInput = {
				type: this.traType,
				symbol: this.symbol,
				tradeType: this.tradeType,
			}

			vpost(vlink.bbTrade.entrustInfo, dataInput).then(re => {
				this.listdata = re.data.list
				if (this.listdata.length > 0) {
					this.hasDate = true
				} else {
					this.hasDate = false
				}
			})
		},
	},
}
</script>

<style scoped>
.order {
	width: 1200px;
	margin: 20px auto;
	min-width: 455px;
}
.active {
	color: red;
}

.ul-right {
	position: absolute;
	right: 3%;
	top: 17%;
}
.ul-right li {
	display: inline-block;
	padding: 0 10px;
	line-height: 27px;
}

select {
	border: 1px solid #424d71;
	background: #262a42;
	border-radius: 3px;

	height: 30px;
	color: white;
}
.selece_1 {
	width: 90px;
}
.selece_2 {
	width: 51px;
}
.btn {
	border: 1px solid #424d71;
	background: #7a98f7;
	border-radius: 3px;
	width: 71px;
	height: 30px;
	line-height: 25px;
	color: white;
}
.slash {
	color: white;
}

.adress-list-item,
.q-table {
	background: #181b2a;
	padding: 23px;
	width: 100%;
	border-top: 3px solid;
}
thead {
	color: var(--clr1);
}
tbody {
	line-height: 40px;
	color: var(--clr0);
}
.adress-list-item-ul {
	width: 100%;
	padding: 0;
}

.adress-list-item-ul-li {
	padding: 0 20px;
	width: 80px;
	color: white;
	text-align: center;
}
</style>